<template>
  <div class="login">
    <div class="login-panel">
      <h1 class="title">后台管理系统</h1>
      <el-tabs type="border-card" v-model="currentTab" stretch>
        <el-tab-pane name="account">
          <template #label>
            <span>
              <el-icon class="login-icon"><user /></el-icon>账号登录
            </span>
          </template>
          <login-account v-model="loginForm" ref="accountRef" />
        </el-tab-pane>
        <el-tab-pane name="phone">
          <template #label>
            <span>
              <el-icon class="login-icon"><iphone /></el-icon>手机登录
            </span>
          </template>
          <login-phone ref="formRef" />
        </el-tab-pane>
      </el-tabs>
      <div class="control-account">
        <el-checkbox v-model="isKeep">记住密码</el-checkbox>
        <el-link type="primary">忘记密码</el-link>
      </div>
      <el-button type="primary" class="login-btn" @click="loginAction">立即登录</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
import loginAccount from "./children/login-account.vue"
import loginPhone from "./children/login-phone.vue"
const isKeep = ref(true)
const loginForm = reactive({
  name: "xfy",
  password: "123456"
})
console.log(loginForm)
const currentTab = ref("account")
// 获取当前组件的类型
// 通过typeof  拿到组件的类型   然后通过ts提供的instanceType  拿到对应的实例
const accountRef = ref<InstanceType<typeof accountRef>>()

const loginAction = () => {
  accountRef.value.accountLoginAction()
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url("../../assets/img/login-bg.svg");
  .login-panel {
    width: 330px;
    margin-bottom: 150px;

    .title {
      text-align: center;
    }
    .login-icon {
      position: relative;
      top: 2px;
      right: 3px;
    }
    .control-account {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
    }

    .login-btn {
      margin-top: 10px;
      width: 100%;
    }
  }
}
</style>
